import { modalData } from '@/types';
import { CloseOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React, { useState } from 'react';
import styles from './modal.less';
const ObsModal = () => {
  const [pathData, setPathData] = useState<modalData>({
    path: '',
    data: {},
    showClose: true,
    title: '',
  });
  window.osn.on('initModal', (event, data: modalData) => {
    console.debug(data);
    setPathData(data);
  });

  const CusComponent = (props: { data: modalData }) => {
    const { data } = props;
    const { path } = data;
    let Component: React.ComponentType<any> | null = null;
    if (path) {
      if (path.startsWith('@/components')) {
        let patientPath = path.split('@/components')[1];
        Component = React.lazy(() => import(`@/components${patientPath}`));
      } else {
        Component = React.lazy(() => import(`@/pages${path}`));
      }
      return (
        <React.Suspense fallback={<div>Loading...</div>}>
          {path && <Component data={data} />}
        </React.Suspense>
      );
    } else {
      return <div>Loading...</div>;
    }
  };
  return (
    <div className={styles.modal}>
      <div className={styles.top}>
        <div className={styles.title}>{pathData.title}</div>
        {pathData.showClose && (
          <Button
            className={styles.closeBtn}
            icon={<CloseOutlined />}
            type={'text'}
            onClick={() => {
              window.tm?.ipcRenderer.invoke('closeObsModal');
            }}
          ></Button>
        )}
      </div>
      <div className={styles.content}>
        <CusComponent data={pathData} />
      </div>
    </div>
  );

  // return (<>
  // <div>
  // initModal{name}
  // </div>
  // </>)
};

export default ObsModal;
